<template>
    <div class="page-content">
       <HyTable  :listData="dataList" 
                 :listCount='dataCount'
                  v-bind="contentTableConfig"
                  v-model:page="pageInfo"
              >
            <!-- header中的插槽-->
            <template #headerHandler>
                <el-button  type='primary' size='medium' @click="handleNewClick">新建用户</el-button>
            </template>

            <!-- 列中的插槽-->
          <template #status='scope'>
            <el-button 
               plain
               size="mini"
               :type="scope.row.enable?'success':'dangar' "
            >{{scope.row.enable?'可用':'不可用'}}</el-button>
          </template>
           <template #createAt='scope'>
            <span>{{$filters.formatTime(scope.row.createAt)}}</span>
          </template>
          <template #updataAt='scope'>
            <span>{{$filters.formatTime(scope.row.updataAt)}}</span>
          </template>
          <template #handler='scope'>
           <div class="handle-btns">
     
              <el-button size='mini' type='text'  @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size='mini' type='text' @click="handleDeleteClick(scope.row)">删除</el-button>
           </div>
          </template>

        <template #header></template>
        <!-- pagecontent中动态插入剩余的插槽 -->
        <template v-for="item in otherPropsSlots" :key="item.prop" #[item.slotName]='scope'>
            <template v-if="item.slotName">
               <slot :name="item.slotName" :row='scope.row'></slot>
            </template>
        </template>
     </HyTable>
        
    </div>
</template>

<script lang="ts">
import { defineComponent,computed,ref, watch } from 'vue'
import { useStore } from 'vuex'
import { usePermission }from '@/hooks/use-permission'



import HyTable from '@/base-ui/table'


export default defineComponent({
    components:{
      HyTable
    },
    props:{
        contentTableConfig:{
            type:Object,
            required:true
        },
        // 动态传进来 接口自己判断用哪个接口
        pageName:{
          type:String,
          required:true
        }
    },
    emits:['newBtnClick','editBtnClick'],
    setup (props,{emit}) {
         const store=useStore()

        //  获取操作权限
      const isCreate=usePermission(props.pageName,'create')
      const isUpdate=usePermission(props.pageName,'update')
      const isDelete=usePermission(props.pageName,'delete')
      const isQuery=usePermission(props.pageName,'query')
    
     
    
        //  双向绑定pageinfo
        const pageInfo=ref({currentPage:0,pageSize:10})
        
        watch(pageInfo,()=>{
            getPageData()
        })
        //  发网络请求
        const getPageData=(queryInfo:any={})=>{  
          // 没有权限 就发请求
          // if(!isQuery) return

           store.dispatch('system/getPageListAction',{
            pageName:props.pageName,
            // pageUrl:'/users/list',
            queryInfo:{
              offset:pageInfo.value.currentPage*pageInfo.value.pageSize,
              size:pageInfo.value.pageSize,
              ...queryInfo
          }
        })
        }
        getPageData()
    // 列表数据
    const dataList=computed(()=>store.getters[`system/pageListData`](props.pageName))
    const dataCount=computed(()=>store.getters[`system/pageListCount`](props.pageName))
    
    // 获取其他的动态插槽名称
    const otherPropsSlots=props.contentTableConfig.propList.filter((item:any)=>{
      if(item.slotName==='status') return false
      if(item.slotName==='creatAt') return false
      if(item.slotName==='updateAt') return false
      if(item.slotName==='handler') return false
      return true
    })



    // 删除
   const handleDeleteClick=(item:any)=>{
    //  console.log(item.id);
     store.dispatch('system/deletePageDataAction',{
       pageName:props.pageName,
       id:item.id
     })
   }

   const handleNewClick=()=>{
      emit('newBtnClick')
   }

   const handleEdit=(item:any)=>{
    emit('editBtnClick',item)
   }

        return {
            dataList,
            getPageData,
            dataCount,
            pageInfo,
            otherPropsSlots,
            isCreate,
            isUpdate,
            isDelete,
            handleDeleteClick,
            handleNewClick,
            handleEdit
        }
    }
})
</script>

<style scoped>
.page-content{
  padding: 20px;

}
</style>